@import "../[html-common]/style/html-common.css";

:root {
	--project-colour: orangered;
}


html {

	--text-light: black;
	--text-dark: white;
	--text-colour: var(--text-light);

	body {

		color: var(--text-colour);
	}
}

/* html[data-colourscheme=light] {
	color-scheme: light;
	--text-colour: var(--text-light);
	background-color: var(--html-light);
	body {
		background-color: var(--body-light);
	}
}

html[data-colourscheme=dark] {
	color-scheme: dark;
	--text-colour: var(--text-dark);
	background-color: var(--html-dark);
	body {
		background-color: var(--body-dark);
	}
}
 */


body {
	margin:1em;
	padding:1em;
	border-radius:1em;
	font-family:sans-serif;
	tab-size: 4;

	--accent-colour: var(--project-colour);
	accent-color: var(--accent-colour);
}



/*
**	main grid layout
*/

main {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin:1ex;	border-radius:1ex;
	&>* {
		margin:inherit;
		border-radius:inherit;
		grid-column-start: span 2;
	}

	.limit-height {
		max-height:30em;
		overflow-y: scroll;
	}
}

.no-grid {
	display:unset;
}


@media (orientation: landscape) {
	main {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		&>* { grid-column-start: span 2; }
	}
}

@media (orientation: portrait) {
	main {
		grid-template-columns: 1fr 1fr ;
	}
}


/*
** Elements & Colours
*/

pre {		/* treat these like markdown */
	--element-colour: whitesmoke;
	white-space: pre-line;
	padding: 2em;
	border-radius: 3em / 2em;
	&::before {
		display:block;
		position:relative;
		top:-1ex;
		/* left:-1em; */
		font-size:xx-large;
		content: '🗨';
	}
}


/*
**	Miscellaneous
*/





.pretty {
	div		{ --colour: dodgerblue; }
	p		{ --colour: plum; }
	section	{ --colour: springgreen; }
	aside	{ --colour: aqua; }

	div, p, section, aside {
		border: 2px solid var(--colour);
		background-color: hwb(from var(--colour) h w b / 0.3);
	}

}





h1:first-of-type {
	margin-top:0;
}

h1 {
	border-bottom: 1px solid silver;
}
h2 {
	border-bottom: 1px dotted silver;
}


a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


nav {
	display:block;
	float:right;
	font-weight:bold;
	font-size: 2em;
}




textarea {

	width:95% ;
	width:stretch;		/* not working in firefox??? */
	display:block;
	height: fit-content;
	min-height:7rlh;
}

output#pageLog {
	display: block;
	white-space: pre;
	width:90%;
	height:auto;
	min-height:5rlh;
	border: 1ex silver inset;
	padding:1em;
}


details {
	margin:1em 0em;
	cursor:pointer;
}
summary:hover {
	text-decoration: underline dotted;
}



/* table styles
*/
table {
	border-collapse: collapse;
	border:0.1rem solid black;
}
th, td {
	padding: 0.1rem 1rem;
	border-style: solid;
	border-width: 0.1rem 0rem;
	border-color: black;
}
th {
	font-weight:normal;
	background-color: silver;
}





body[onload]::before {
	position:absolute;
	font-family: monospace;
	top:0ex;
	color: dimgrey;
	content: 'onload=' attr(onload) ;
}